<template>
	<a-drawer :title="title" :width="400" @close="handleCancel" :visible="visible" :maskClosable="false" :bodyStyle="{ paddingBottom: '60px' }">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
			<!-- 字典名称 -->
			<a-form-model-item label="角色名称" prop="name" ref="name">
				<a-input :placeholder="placeholder.name" v-model.number="form.name" />
			</a-form-model-item>
			<!-- 字典代码 -->
			<a-form-model-item label="角色描述" prop="description" ref="description">
				<a-textarea 
				 :placeholder="placeholder.description" v-model="form.description"
				 :rows="2" />
		 
			</a-form-model-item>
			<!-- 字典描述 -->
			<a-form-model-item label="角色属性">
				<a-radio-group v-model="form.attribute" button-style="solid">
					<a-radio-button v-for="(item,index) in RoleAttributeOpt"
					 :key="index" :value="item.value">{{item.label}}</a-radio-button>
					 
				</a-radio-group>
			</a-form-model-item>
			
			<RoleTree 
			 v-if="form.attribute=='0'"
			:menuIds="form.menuIds"   :roleId="editRecord.id"   @onCheck="onCheck" />		
				
				 <a-alert show-icon  v-else  message="角色属性设为【超级管理】时,该角色将拥有系统所有操作权限!" type="warning" />

		</a-form-model>
		<!-- Modal 页脚 -->
		<footer class="drawer-footer">
			<a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
		</footer>
	</a-drawer>
</template>
<script>
	import {dictLoad} from '../../../util/internal.api';
	import {
		roleAdd,
		roleUpdate
	} from '../public/http.js';
	export default {
		props: ['editRecord'],
		components: {
			RoleTree: resolve => { require(['./tree.vue'], resolve);}
		},
		data() {
			return {
				
				isupdate: false, //是否是更新模式	
				loading: false, //按钮Loading
				title: '新增角色',
				visible: true, //modal 显示状态
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					}
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					}
				},
				RoleAttributeOpt: [], //角色属性字段选项
				placeholder: {
					name: '请设置角色名称 EG:商品管理员',
					description: '请设置角色简介 选填'
				},
				form: {
					name: '',
					description: '',
					attribute: '0',
					menuIds: [],
				},
				rules: {
					name: {
						required: true,
						message: '请设置角色名称',
						trigger: 'blur'
					},
					description: {
						required: false,
						message: '请设置角色描述',
						trigger: 'blur'
					},
				}
			};
		},
		methods: {
			
			//接收Tree 返回来数据选中数据	
			onCheck(e){this.form.menuIds=e},
			
		 
			//表单提交事件
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					//验证成功后进行数据提交
					if (valid) {
						if (this.isupdate) {
							roleUpdate(this.form.id, this.form).then(res => this.xhrMsg(res));
						} else {
							roleAdd(this.form).then(res => this.xhrMsg(res));
						}
					}
				});
			},
			//新增和删除返回相同的消息构造
			xhrMsg(res) {
				 
				if (res.code == 0) {
					//成功提醒
					this.$notification.success({
						message: '操作成功',
						description: res.message,
					});
					this.visible = false;
					this.$emit('closeFun', {
						render: true
					});
				} else {
					//错误提醒
					this.$notification.error({
						message: '操作失败',
						description: res.message,
					});
				}
				this.loading = false;
			},
			//关闭弹窗
			handleCancel() {
				this.visible = false;
				this.$emit('closeFun', {
					render: false
				});
			},
			//表单初始化
			fromVal() {

				let obj = {...this.editRecord};
				if (obj.id) {
					this.form = obj;
					
					this.isupdate = true;
					this.title = "编辑角色"
				}
			},
			 //数据初始化
			async init() {
					await dictLoad('RoleAttribute').then(res => this.RoleAttributeOpt = res)
						this.fromVal();
					}
		},
		created() {
			 
			this.init();
		},
		 
	};
</script>
